<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,body {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        国家：<select id="gj" ></select>
        省份：<select name="sf" id="sf" ></select>
        城市：<select name="cs" id="cs"></select>

        <script>
            // 说明1：标签对象.value 获取表单相关标签的数据
            // 说明2：针对于 select 标签 会先获取option的value属性，没有就获取双标签里面的内容。
            
            var arr_gj = ['请选择国家', '中国', '美国', '法国', '意大利']
            var arr_sf = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省"];
            var arr_cs = [
                            ["请选择城市/地区"],
                            ["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
                            ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
                            ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
                            ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
                            ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
                            ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']
                        ];
            var gjObj = document.querySelector('#gj')
            var sfObj = document.querySelector('#sf')
            var csObj = document.querySelector('#cs')
            // arr_gj.forEach(function(item,index){
            //     var optionObj = document.createElement('option')
            //     optionObj.innerText = item;
            //     gjObj.appendChild(optionObj)
            // })
            arr_gj.forEach(function(item,index) {
                var optionObj = document.createElement('option')
                optionObj.innerText = item;
                gjObj.appendChild(optionObj)
            })
            
            
            
            
            gjObj.onchange = function() {
                if(this.value == '中国') {
                    arr_sf.forEach(function(item,index) {
                        var optionObj = document.createElement('option')
                        optionObj.value = index
                        optionObj.innerText = item+' - '+index;
                        sfObj.appendChild(optionObj)
                    })
                }else {
                    sfObj.innerText = ' '
                    csObj.innerText = ' '
                }
            }

            sfObj.onchange = function() {
                if(this.value == '') {
                    csObj.innerText = ' '
                }else {
                    csObj.innerText = ' '
                    var sfValue = this.value
                    var newcs = arr_cs[sfValue]
                    newcs.forEach(function(item,index) {
                        var optionObj = document.createElement('option')
                        optionObj.innerHTML = item;
                        csObj.appendChild(optionObj)
                        
                    })
                }

                
            }
            
            
        </script>
    </body>
</html>